<template>
  <div>
    <Teleport to="body">
      <div id="small"></div>
    </Teleport>
    <div class="observeContainer" id="vedioContainer"></div>
    <div class="bigbox">
      <Teleport to="#small" :disabled="disabled">
        <div id="mse"></div>
      </Teleport>
    </div>
    <div style="height: 2000px"></div>
  </div>
</template>

<script lang="ts" setup>
import Player from "xgplayer";
import { onMounted, ref } from "vue";
const disabled = ref<boolean>(true);
onMounted(() => {
  new Player({
    id: "mse",
    url: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
    height: "420px",
    poster:
      "https://lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg",
  });
  document.addEventListener("scroll", function () {
    if ((document.documentElement.scrollTop || document.body.scrollTop) > 420) {
      console.log("不在可视区域");
      disabled.value = false;
    } else {
      disabled.value = true;
    }
  });
});
</script>

<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
}
.observeContainer {
  width: 600px;
  height: 420px;
  position: absolute;
  left: 0;
  top: 0;
}
#small {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 140px;
  border: 1px solid #ccc;
}
.bigbox {
  width: 600px;
  height: 420px;
  border: 1px solid #ccc;
}
</style>
